<!--#include file="header.html"-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;">
    <legend style="font-size: 14px;">输入原始网址</legend>
</fieldset>
<div class="layui-row">
    <div class="layui-col-xs10">
        <div class="grid-demo grid-demo-bg1">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0px;">
                        <input type="text" name="origin" lay-verify="origin" autocomplete="off" 
                        placeholder="请输入原始链接地址" class="layui-input" id="origin" />
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-col-xs2">
        <div class="grid-demo" style="margin-left: 20px;">
            <button type="button" class="layui-btn layui-bg-cyan" id="btn_trans">立即转换</button>
        </div>
    </div>
</div>

<div class="layui-row" style="margin-top: 20px;">
    <div class="layui-col-md5">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-size: 14px">短链生成结果</legend>
        </fieldset>
        <div class="">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0px;">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" 
                        placeholder="" class="layui-input" readonly="readonly" id="short_url" />
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="layui-col-md5 layui-col-md-offset1">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend style="font-size: 14px">二维码图片</legend>
        </fieldset>
        <div class="grid-demo grid-demo-bg1" id="short_base"></div>
    </div>
</div>
<!--#include file="footer.html"-->
<script>
layui.use(['jquery', 'layer'], function() { 
    var $ = jQuery, layer = layui.layer;
    var origin = $("#origin"), short_link = $("#short_url"); short_base = $("#short_base");
    $("#btn_trans").click(function() { 
        var url_long = origin.val();
        if (url_long === "") { 
            layer.alert('请输入要转换原始链接网址!');
            origin.focus();
            return;
        }

        $.ajax({
            url: get_api_url("trans"),
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({origin: url_long, key: ""}),
            success: function(res) { 
                if (res.code !== 0) { 
                    layer.alert(res.message);
                    return;
                }
                var short_url = res.result.url;
                var short_src = res.result.code;
                short_link.val(short_url);
                short_base.html("<img src='data:image/png;base64," + short_src + "' />")
            }
        });
    });
});
</script>
